<template>
    <div class="bi-data-list">
        <div class="bi-data-list__main" v-loading="reloading">
            <slot :data="data"></slot>
        </div>
        <ui-empty v-if="!loading && !reloading && (!data || !data.length)"></ui-empty>
        <div class="bi-data-list__more" v-if="data && data.length">
            <div class="bi-data-list__more-loading" v-if="loading">数据加载中</div>
            <div class="bi-data-list__more-nomore" v-else-if="notMore">没有更多数据了</div>
        </div>
    </div>
</template>
<script>
import UiEmpty from 'board/components/empty'

export default {
    name: 'BiDataList',
    components: {
        UiEmpty
    },
    props: {
        queryMethod: {
            type: Function
        }
    },
    data () {
        return {
            loading: false,
            reloading: false,
            notMore: false,
            pageSize: 20,
            pageIndex: 0,
            data: [],
            total: 0
        }
    },
    created () {
        this.reload()
    },
    mounted () {
        window.addEventListener('scroll', this.handlePageScroll)
        window.document.documentElement.addEventListener('scroll', this.handlePageScroll)
    },
    methods: {
        getPageScrollTop () {
            return Math.max(window.document.body.scrollTop, window.document.documentElement.scrollTop)
        },
        getPageScrollHeight () {
            return window.document.documentElement.scrollHeight
        },
        handlePageScroll () {
            if (this.notMore) {
                return
            }
            if (this.loading) {
                return
            }
            console.log(this.getPageScrollHeight(), this.getPageScrollTop(), window.innerHeight)
            if (this.getPageScrollHeight() - this.getPageScrollTop() <= window.innerHeight) {
                this.loadMoreData()
            }
        },
        loadMoreData () {
            if (this.notMore) {
                return Promise.reject()
            }
            let nextPageIndex = this.pageIndex + 1
            this.loadData({
                pageIndex: nextPageIndex
            }).then(({ data }) => {
                this.pageIndex = nextPageIndex
                this.data = [].concat(this.data, data)
            })
        },
        reload () {
            this.notMore = false
            this.pageIndex = 0
            this.reloading = true
            return this.loadData().then(rs => {
                this.data = rs.data
            }).finally(() => {
                this.reloading = false
            })
        },
        loadData (params) {
            if (!this.queryMethod) {
                return Promise.reject()
            }
            this.loading = true
            return this.queryMethod(Object.assign({
                current: this.pageIndex + 1,
                size: this.pageSize
            }, params)).then(({ records, total }) => {
                this.notMore = records.length < this.pageSize || records.length >= total
                this.total = total
                return {
                    data: records,
                    total: this.total
                }
            }).finally(() => {
                this.loading = false
            })
        }
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.handlePageScroll)
        window.document.documentElement.removeEventListener('scroll', this.handlePageScroll)
    }
}
</script>
<style lang="scss">
.bi-data-list{
    height: 100%;
}
.bi-data-list__more{
    padding: 12px;
    color: #999;
    text-align: center;
}
</style>